<template>
  <div class="box">
    <div class="header">
      <page-header></page-header>
    </div>
    <div class="grid-container">
      <div class="grid-item1 item">
        <item-title title="审计问题与发现问题金额的变动分析"></item-title>
        <top-left></top-left>
      </div>

      <div class="grid-item2">
        <div class='mapTitle'>审计问题地图</div>
        <middle-map></middle-map>
      </div>

      <div class="grid-item3 item">
        <item-title title="主审人效分析" :is-reverse="true"></item-title>
        <top-right></top-right>
      </div>

      <div class="grid-item4 item">
        <item-title title="工程审计风险分析"></item-title>
        <bottom-left></bottom-left>
      </div>

      <div class="grid-item5 item">
        <item-title title="领导干部履职智能画像" :is-reverse="true"></item-title>
        <bottom-right></bottom-right>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from './components/pageHeader'
import TopLeft from "@/views/homePage/echartsItem/topLeft";
import TopRight from "@/views/homePage/echartsItem/topRight";
import BottomLeft from "@/views/homePage/echartsItem/bottomLeft";
import BottomRight from "@/views/homePage/echartsItem/bottomRight";
import MiddleMap from "@/views/homePage/echartsItem/middleMap";
import ItemTitle from "@/views/homePage/components/itemTitle";
export default {
  components: {
    PageHeader,
    TopLeft,
    TopRight,
    BottomLeft,
    BottomRight,
    MiddleMap,
    ItemTitle
  },
  data() {
    return {}
  }
}
</script>

<style scoped>
.box{
  background-image: url("../../assets/img/bg.png");
  background-size: 100% 100%;
  width: 100vm;
  height: 100vh;
}
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: calc((92vh - 50px)/2) calc((92vh - 50px)/2);
  grid-gap: 25px;
  padding: 0 25px 25px 25px;
}

.item {
  background-color: #2a496557;
  border: 1px solid rgba(0, 0, 0, 0.8);
  font-size: 30px;
  height: 100%;
  text-align: center;
  opacity: 1;
  overflow: hidden;
}

.grid-item2 {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}

.mapTitle{
  width:175px;
  height:40px;
  background-image:url('../../assets/img/mapTitleBg.png');
  font-family: AlimamaShuHeiTi-Bold;
  background-size:100% 100%;
  font-size: 18px;
  color: #FFFFFF;
  letter-spacing: 1px;
  text-align: center;
  line-height: 21.95px;
  font-weight: 700;
  margin: 10px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
